<script setup lang="ts">
// import PanelGroup from './components/PanelGroup.vue'
import { ElRow, ElCol, ElCard, ElSkeleton } from 'element-plus'
import { Echart } from '@/components/Echart'
import { orderDataOptions, activeDataOptions } from './echarts-data'
import { ref, reactive } from 'vue'
import {
  getDataStatisticsApi,
  getOrderDataTrendStatisticsApi,
  getToDoDataStatisticsApi,
  getActiveDataTrendStatisticsApi
} from '@/api/dashboard/analysis'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { useI18n } from '@/hooks/web/useI18n'
import { formatTime } from '@/utils'
import { hasPermission as hasPermis } from '@/components/Permission/src/utils'

const { t } = useI18n()

const loading = ref(true)
const valueOne = ref('')
const valueTwo = ref('')
const oneDateType = ref(1)
const twoDateType = ref(1)
const oneEndTime = ref('')
const twoEndTime = ref('')
const oneStartTime = ref('')
const twoStartTime = ref('')
const isShowDataStatistics = ref(true)
const isShowOrderDataTrendStatistics = ref(true)
const isShowToDoDataStatistics = ref(true)
const isShowActiveDataTrendStatistics = ref(true)

const dataStatistics = ref<any>([])
const toDoData = ref<any>([])

const disablePastThreeMonths = (time) => {
  const today = new Date() // 获取今天的日期对象
  // 计算三个月前的日期
  const threeMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 2, today.getDay())
  return time > today || time < threeMonthsAgo // 如果时间大于今天或小于三个月前则返回true，表示不可选
}

// 总览
const getDataStatistics = async () => {
  if (!hasPermis('GET /index/dataStatistics')) {
    isShowDataStatistics.value = false
    return false
  }
  const res = await getDataStatisticsApi().catch(() => {})
  if (res) {
    dataStatistics.value = res.data
  }
}

const orderDataOptionsData = reactive<EChartsOption>(orderDataOptions) as EChartsOption

// 成交额
const getOrderDataTrendStatistics = async () => {
  if (!hasPermis('GET /index/orderDataTrendStatistics')) {
    isShowOrderDataTrendStatistics.value = false
    return false
  }
  const res = await getOrderDataTrendStatisticsApi({
    dateType: oneDateType.value,
    endTime: oneEndTime.value,
    startTime: oneStartTime.value
  }).catch(() => {})
  if (res) {
    set(
      orderDataOptionsData,
      'xAxis.data',
      res.data.map((v) => t(v.date))
    )
    set(orderDataOptionsData, 'series', [
      {
        name: '成交量',
        // smooth: true,
        symbol: 'none',
        type: 'line',
        data: res.data.map((v) => v.orderNum),
        animationDuration: 2800,
        animationEasing: 'cubicInOut',
        yAxisIndex: 0
      },
      {
        name: '成交额',
        // smooth: true,
        symbol: 'none',
        type: 'line',
        itemStyle: {},
        data: res.data.map((v) => v.orderAmt),
        animationDuration: 2800,
        animationEasing: 'quadraticOut',
        yAxisIndex: 1
      }
    ])
  }
}
const getToDoDataStatistics = async () => {
  if (!hasPermis('GET /index/toDoDataStatistics')) {
    isShowToDoDataStatistics.value = false
    return false
  }
  const res = await getToDoDataStatisticsApi().catch(() => {})
  if (res) {
    toDoData.value = res.data
  }
}

const activeDataOptionsData = reactive<EChartsOption>(activeDataOptions) as EChartsOption

// 活动统计
const getActiveDataTrendStatistics = async () => {
  if (!hasPermis('GET /index/activeDataTrendStatistics')) {
    isShowActiveDataTrendStatistics.value = false
    return false
  }
  const res = await getActiveDataTrendStatisticsApi({
    dateType: twoDateType.value,
    endTime: twoEndTime.value,
    startTime: twoStartTime.value
  }).catch(() => {})
  if (res) {
    set(
      activeDataOptionsData,
      'xAxis.data',
      res.data.map((v) => t(v.date))
    )
    set(activeDataOptionsData, 'series', [
      {
        smooth: true,
        type: 'line',
        symbol: 'none',
        data: res.data.map((v) => v.value),
        animationDuration: 2800,
        animationEasing: 'cubicInOut',
        itemStyle: {
          // 添加这一行来修改折线颜色
          color: 'rgb(0, 127, 255)' // 设置颜色为红色
        },
        areaStyle: {
          // 添加这一行来设置面积图颜色
          color: 'rgba(0, 127, 255, 0.2)' // 设置面积图颜色为绿色
        }
      }
    ])
  }
}

const getAllApi = async () => {
  await Promise.all([
    getDataStatistics(),
    getOrderDataTrendStatistics(),
    getToDoDataStatistics(),
    getActiveDataTrendStatistics()
  ])
  loading.value = false
}

getAllApi()

const handleChangeOneDateType = (i) => {
  oneDateType.value = i
  oneEndTime.value = ''
  oneStartTime.value = ''
  valueOne.value = ''
  getOrderDataTrendStatistics()
}

const handleChangeTwoDateType = (i) => {
  twoDateType.value = i
  twoEndTime.value = ''
  twoStartTime.value = ''
  valueTwo.value = ''
  getActiveDataTrendStatistics()
}

const handleOneChange = () => {
  oneDateType.value = 4
  oneEndTime.value = formatTime(valueOne.value[1], 'yyyy-MM-dd')
  oneStartTime.value = formatTime(valueOne.value[0], 'yyyy-MM-dd')
  getOrderDataTrendStatistics()
}

const handleTwoChange = () => {
  twoDateType.value = 4
  twoEndTime.value = formatTime(valueTwo.value[1], 'yyyy-MM-dd')
  twoStartTime.value = formatTime(valueTwo.value[0], 'yyyy-MM-dd')
  getActiveDataTrendStatistics()
}
</script>

<template>
  <!-- <PanelGroup /> -->
  <ElRow :gutter="20" justify="space-between">
    <ElCol v-hasPermi="'GET /index/dataStatistics'" :span="24">
      <ElCard shadow="hover" class="mb-20px">
        <div class="flex flex-wrap pt-23px">
          <div style="box-sizing: border-box" class="flex-[20%] mb-50px pl-20px">
            <div style="color: #999" class="text-14px mb-10px">今日成交额</div>
            <div class="text-26px font-500">{{ dataStatistics.dayOrderAmt }}</div>
          </div>
          <div style="box-sizing: border-box" class="flex-[20%] mb-50px pl-20px">
            <div style="color: #999" class="text-14px mb-10px">今日成交量</div>
            <div class="text-26px font-500">{{ dataStatistics.dayOrderNum }}</div>
          </div>
          <div style="box-sizing: border-box" class="flex-[20%] mb-50px pl-20px">
            <div style="color: #999" class="text-14px mb-10px">今日结算金额</div>
            <div class="text-26px font-500">{{ dataStatistics.daySettleAmt }}</div>
          </div>
          <div style="box-sizing: border-box" class="flex-[20%] mb-50px pl-20px">
            <div style="color: #999" class="text-14px mb-10px">今日结算佣金</div>
            <div class="text-26px font-500">{{ dataStatistics.daySettleSubsidyAmt }}</div>
          </div>
          <div style="box-sizing: border-box" class="flex-[20%] mb-50px pl-20px">
            <div style="color: #999" class="text-14px mb-10px">今日提现佣金</div>
            <div class="text-26px font-500">{{ dataStatistics.dayWithdrawalAmt }}</div>
          </div>
          <div style="box-sizing: border-box" class="flex-[20%] mb-40px pl-20px">
            <div style="color: #999" class="text-14px mb-10px">今日新增用户数</div>
            <div class="text-26px font-500">{{ dataStatistics.newUserNum }}</div>
          </div>
          <div style="box-sizing: border-box" class="flex-[20%] mb-40px pl-20px">
            <div style="color: #999" class="text-14px mb-10px">今日新增商家数</div>
            <div class="text-26px font-500">{{ dataStatistics.newBusinessNum }}</div>
          </div>
          <div style="box-sizing: border-box" class="flex-[20%] mb-40px pl-20px">
            <div style="color: #999" class="text-14px mb-10px">今日新增商户数</div>
            <div class="text-26px font-500">{{ dataStatistics.newMerchantNum }}</div>
          </div>
          <div style="box-sizing: border-box" class="flex-[20%] mb-40px pl-20px">
            <div style="color: #999" class="text-14px mb-10px">今日新增经纪人数</div>
            <div class="text-26px font-500">{{ dataStatistics.newAgentNum }}</div>
          </div>
          <div style="box-sizing: border-box" class="flex-[20%] mb-40px pl-20px"></div>
        </div>
      </ElCard>
    </ElCol>
    <ElCol
      v-if="
        !(
          isShowDataStatistics ||
          isShowOrderDataTrendStatistics ||
          isShowToDoDataStatistics ||
          isShowActiveDataTrendStatistics
        )
      "
      :span="24"
    >
      <ElCard shadow="hover" class="mb-20px">
        <div>无系统权限</div>
      </ElCard>
    </ElCol>
    <ElCol v-if="isShowOrderDataTrendStatistics || isShowToDoDataStatistics" :span="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated :rows="4">
          <div class="flex justify-between">
            <div v-hasPermi="'GET /index/orderDataTrendStatistics'" class="w-[70%]">
              <div class="flex items-center">
                <div class="w-[18%]">近7日成交统计</div>
                <div class="flex items-center">
                  <div
                    :class="{ active: oneDateType === 1 }"
                    class="btn"
                    @click="handleChangeOneDateType(1)"
                    >今日</div
                  >
                  <div
                    :class="{ active: oneDateType === 2 }"
                    class="btn"
                    @click="handleChangeOneDateType(2)"
                    >本周</div
                  >
                  <div
                    :class="{ active: oneDateType === 3 }"
                    class="btn"
                    @click="handleChangeOneDateType(3)"
                    >本月</div
                  >
                  <div :class="{ active: oneDateType === 4 }" class="btn">自定义</div>
                  <el-date-picker
                    style="width: 280px"
                    v-model="valueOne"
                    :disabled-date="disablePastThreeMonths"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="handleOneChange"
                  />
                </div>
              </div>
              <Echart :options="orderDataOptionsData" :height="350" />
            </div>
            <div v-hasPermi="'GET /index/toDoDataStatistics'" class="w-[28%]">
              <div class="text-26px font-bold">待办事项</div>
              <div class="flex flex-wrap">
                <div class="flex-[50%] text-center mb-20 mt-10">
                  <div class="text-30px font-blod">{{ toDoData.businessEnterAuditNum }}</div>
                  <div>商家入驻审核</div>
                </div>
                <div class="flex-[50%] text-center mt-10">
                  <div class="text-30px font-blod">{{ toDoData.agentWithdrawalAuditNum }}</div>
                  <div>经纪人提现审核</div>
                </div>
                <div class="flex-[50%] text-center mb-20 mt-10">
                  <div class="text-30px font-blod">{{
                    toDoData.merchantAmtWithdrawalAuditNum
                  }}</div>
                  <div>商户本金提现审核</div>
                </div>
                <div class="flex-[50%] text-center mb-20 mt-10">
                  <div class="text-30px font-blod">{{
                    toDoData.merchantSubsidyWithdrawalAuditNum
                  }}</div>
                  <div>商户补贴提现审核</div>
                </div>
              </div>
            </div>
          </div>
        </ElSkeleton>
      </ElCard>
    </ElCol>
    <ElCol v-hasPermi="'GET /index/activeDataTrendStatistics'" :span="24">
      <ElCard shadow="hover" class="mb-20px">
        <ElSkeleton :loading="loading" animated :rows="4">
          <div class="text-20px font-bold">活动发布</div>
          <div class="flex justify-between">
            <div class="w-[20%]">
              <div class="mb-20 mt-10">
                <div>累计发布活动数</div>
                <div class="text-30px font-blod">{{ dataStatistics.totalActiveNum }}</div>
              </div>
              <div>
                <div>本周上新活动数</div>
                <div class="text-30px font-blod">{{ dataStatistics.weekActiveNum }}</div>
              </div>
            </div>
            <div class="w-[78%]">
              <div class="flex items-center">
                <div class="w-[18%]">近7日活动发布</div>
                <div class="flex items-center">
                  <div
                    :class="{ active: twoDateType === 1 }"
                    class="btn"
                    @click="handleChangeTwoDateType(1)"
                    >今日</div
                  >
                  <div
                    :class="{ active: twoDateType === 2 }"
                    class="btn"
                    @click="handleChangeTwoDateType(2)"
                    >本周</div
                  >
                  <div
                    :class="{ active: twoDateType === 3 }"
                    class="btn"
                    @click="handleChangeTwoDateType(3)"
                    >本月</div
                  >
                  <div :class="{ active: twoDateType === 4 }" class="btn">自定义</div>
                  <el-date-picker
                    style="width: 280px"
                    v-model="valueTwo"
                    :disabled-date="disablePastThreeMonths"
                    type="daterange"
                    range-separator="To"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="handleTwoChange"
                  />
                </div>
              </div>
              <Echart :options="activeDataOptionsData" :height="350" />
            </div>
          </div>
        </ElSkeleton>
      </ElCard>
    </ElCol>
  </ElRow>
</template>

<style lang="less" scoped>
.btn {
  // width: 50px;
  // height: 24px;
  padding: 5px 8px;
  margin-right: 6px;
  // text-align: center;
  font-size: 14px;
  line-height: 24px;
  color: #666;
  cursor: pointer;
  border-radius: 4px;

  &.active {
    color: #fff;
    background-color: #409eff;
  }
}
</style>
